<template>
  <div class="login">
    <login-account :loginConfig="loginConfig"></login-account>
    <Particles
      id="tsparticles"
      :options="partielOptions"
      :particlesInit="particlesInit"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { loginConfig } from './config/login.config'
import { partielOptions } from './config/particel.config'
import LoginAccount from './cpn/login-account.vue'
import { loadFull } from 'tsparticles'

export default defineComponent({
  name: 'login-page',
  components: {
    LoginAccount
  },

  setup() {
    const particlesInit = async (engine: any) => {
      await loadFull(engine)
    }
    return {
      loginConfig,
      partielOptions,
      particlesInit
    }
  }
})
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/img/login_bg.jpg');
  background-size: cover;
  #tsparticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }
}
</style>
